<div style="margin-bottom: 8px">
  <button nz-button nzType="primary" (click)="addHotSearch()">添加热搜</button>
</div>
<!--表格-->
<nz-table #basicTable [nzData]="listOfData.records"
          nzSize="small"
          nzShowSizeChanger
          nzShowPagination="false"
          [nzFrontPagination]="false"
>
  <thead>
  <tr>
    <th nzAlign="center">序号</th>
    <th nzAlign="center">名称</th>
    <th nzAlign="center">标签</th>
    <th nzAlign="center">链接</th>
    <th nzAlign="center">开始时间</th>
    <th nzAlign="center">结束时间</th>
    <th nzAlign="center">状态</th>
    <th nzAlign="center" nzWidth="400px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of basicTable.data;let index=index;">
    <td nzAlign="center">{{ index + 1 }}</td>
    <td nzAlign="center">{{ data['word'] }}</td>
    <td nzAlign="center">
      <img
        nz-image
        width="60px"
        height="60px"
        *ngIf="data['hPicUrl']"
        [nzSrc]="data['hPicUrl']"
      />
    </td>
    <td nzAlign="center">{{ data['hUrl'] }}</td>
    <td nzAlign="center">{{ data['beginTime'] }}</td>
    <td nzAlign="center">{{ data['endTime'] }}</td>
    <td nzAlign="center" [attr.hotSearchStatus]="data['status']">{{ STATUS[data['status']] }}</td>
    <td nzAlign="center">
      <a (click)="move(data['id'],1)" *ngIf="index!==0">上移</a>
      <a (click)="move(data['id'],2)" *ngIf="index+1!==basicTable.data.length">下移</a>
      <a (click)="editHotSearch(data)">编辑</a>
      <a nzPopconfirmPlacement="top" style="color: #ff0000"
         nz-popconfirm
         nzPopconfirmTitle="确认要删除?"
         nzOkText="确认"
         nzCancelText="取消" (nzOnConfirm)="deleteHotSearch(data['id'])">删除</a>
    </td>
  </tr>
  </tbody>
</nz-table>


<!--热搜管理-->
<nz-modal
  [(nzVisible)]="hotSearchModal.visible"
  nzTitle="分类管理"
  (nzOnCancel)="hideHotSearchModal()">
  <div *nzModalContent>
    <div class="rowItem">
      <label for="addCategoryModalName"><span>*</span>名称</label>
      <input id="addCategoryModalName" nz-input placeholder="请输入分类名称" [(ngModel)]="hotSearchModal.word"/>
    </div>
    <div class="rowItem">
      <label for="addCategoryModalImage">标签</label>
      <app-image-upload id="addCategoryModalImage" style="width: 250px;display: inline-block"
                        [maxImgLength]="1"
                        [imageUrl]="hotSearchModal.hPicUrl"
                        (deleteImg)="hotSearchModal.hPicUrl=''"
                        (urlChange)="hotSearchModal.hPicUrl=$event"></app-image-upload>
    </div>
    <div class="rowItem">
      <label>关联机型</label>
      <nz-select
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="请选择关联机型"
        nzMode="multiple"
        [nzMaxTagCount]="1"
        [(ngModel)]="hotSearchModal.relationType"
      >
        <nz-option *ngFor="let option of recycleModelList" [nzLabel]="option['name']" [nzValue]="option['id']"></nz-option>
      </nz-select>
    </div>
    <div class="rowItem" style="margin-bottom: 0">
      <label>链接</label>
      <nz-select
        nzShowSearch
        nzAllowClear
        nzPlaceHolder="请选择链接"
        [(ngModel)]="hotSearchModal.hUrl"
      >
        <nz-option *ngFor="let option of linkList" [nzLabel]="option['name']" [nzValue]="option['key']"></nz-option>
      </nz-select>
    </div>
    <div style="padding-left: 88px;margin-bottom: 8px;color: #999999">{{linkToRemark(hotSearchModal.hUrl)}}</div>
    <div class="rowItem">
      <label>参数</label>
      <input nz-input placeholder="请输入参数多个用@分隔" [(ngModel)]="hotSearchModal.params"/>
    </div>
    <div class="rowItem">
      <label><span>*</span>时间</label>
      <nz-range-picker
        [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
        nzFormat="yyyy-MM-dd HH:mm:ss"
        [(ngModel)]="hotSearchModal.time"
      ></nz-range-picker>
    </div>
  </div>
  <div *nzModalFooter>
    <button nz-button nzType="default" (click)="hideHotSearchModal()">取消</button>
    <button nz-button nzType="primary" (click)="saveHotSearch()">确认</button>
  </div>
</nz-modal>
